<template>
    <div>
        <!-- 点击添加菜单
        visible	是否显示 Dialog，支持 .sync 修饰符	boolean
        center	是否对头部和底部采用居中布局	boolean
        before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog
        active-value	switch 打开时的值	boolean / string / number	—	true
        inactive-value	switch 关闭时的值	boolean / string / number	—	false	
        validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
        resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
        
         -->
        <el-dialog :title="isAdd ? '添加菜单' : '编辑菜单'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="formMenu" label-width="100px" ref="menuRef" :rules="rules" class="demo-ruleForm">
                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="formMenu.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select @change="changePid" v-model="formMenu.pid" placeholder="请选择上级菜单">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in $store.getters['menu/getMenu']" :key="item.id" :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-radio-group v-model="formMenu.type">
                        <el-radio disabled v-model="formMenu.type" :label="1">目录</el-radio>
                        <el-radio disabled v-model="formMenu.type" :label="2">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="formMenu.type==1" label="菜单图标">
                    <el-select  v-model="formMenu.icon" placeholder="请选择上级菜单">
                        <el-option v-for="item in iconlist" :key="item" 
                            :value="item">
                            <i :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="菜单地址">
                    <el-select  v-model="formMenu.url" placeholder="请选择上级菜单">
                        <el-option v-for="item in IndexRouters" :key="item.path" :label="item.meta.title"
                            :value="item.path">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="formMenu.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="menuAdd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { menuadd, menuinfo, menuedit } from '../../request/api'
//引入菜单地址 让其保持与路由地址一致
import { IndexRouters } from "../../router";
export default {
    props: ['isShow', "isAdd"],
    data() {
        return {
            formMenu: {
                pid: 0,//上级分类
                title: '',//菜单名称
                icon: '',//icon图标
                url: '', //菜单地址
                type: 1,//  目录/菜单
                status: 1 //状态
            },
            rules: {
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: "请选择上级菜单", trigger: "change" }
                ]
            },
            iconlist:['el-icon-s-tools','el-icon-setting','el-icon-s-goods','el-icon-goods','el-icon-user','el-icon-user-solid'],
            IndexRouters:IndexRouters
        }
    },
    methods: {
        changePid(){
            this.formMenu.type = this.formMenu.pid == 0 ? 1 : 2
        },
        // cancel 子传父 关闭添加菜单弹框
        cancel() {
            this.$emit('cancel', false)
            this.clear()
        },
        // 清除弹框内容
        clear() {
            this.formMenu = {
                pid: 0,//上级分类
                title: '',//菜单名称
                icon: '',//icon图标
                url: '', //菜单地址
                type: 1,//  目录/菜单
                status: 1 //状态
            }
            // 对表单进行重置
            this.$refs.menuRef.resetFields()
        },
        // 获取一条数据事件，数据回显
        lookup(id) {
            menuinfo({ id })
                .then(res => {
                    if (res.code == 200) {
                        this.formMenu = res.list
                        // 编辑地址需要传 id
                        this.formMenu.id = id
                    }
                })
        },
        // 添加菜单
        menuAdd() {

            this.$refs.menuRef.validate((val) => {
                if (val) {
                    if (this.isAdd) {// isAdd为真时，是添加菜单
                        //调用接口
                        menuadd(this.formMenu)
                            .then(res => {
                                if (res.code == 200) {
                                    // 关闭弹窗
                                    this.cancel()
                                    // 重新调用列表
                                    this.$store.dispatch('menu/GetMenuInfo')
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })

                    } else {//为假时，是编辑接口
                        menuedit(this.formMenu)
                            .then(res => {
                                if (res.code == 200) {
                                    // 关闭弹窗
                                    this.cancel()
                                    // 重新调用列表
                                    this.$store.dispatch('menu/GetMenuInfo')
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }

                }
            })
        }
    },
    mounted() {

    },
}
</script>
<style scoped></style>